import React, { useEffect, useRef, useState } from "react";
interface LazyImage {
  src: string;
  alt?: string;
}
const LazyImage: React.FC<LazyImage> = ({ src, alt }) => {
  const [imageSrc, setImage] = useState("/public/image/底座.png");
  const imageRef = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver((arr) => {
      if (arr[0].isIntersecting) {
        setImage(src);
        io.disconnect();
      }
    });
    if (imageRef.current) {
      io.disconnect();
    }
  }, []);
  const onError = () => {
    setImage("/public/image/底座.png");
  };
  return (
    <div>
      <img ref={imageRef} src={imageSrc} alt={alt} onError={onError} />
    </div>
  );
};
export default LazyImage;
